<template>
  <el-row class="container">
    <!--头部-->
    <el-row class="header" style="background-color:#fff;margin-bottom:14px;border-bottom:2px solid #f7f7f7;height:76px">
      <el-col :xs="8" :span="3" class="logo">
        <span class="txt"><img src="../common/img/logo-ld.png" style="width:60px"> 来单运营系统</span>
      </el-col>
      <el-col :xs="8" :span="15">
        <el-menu class="menu-h" mode="horizontal">
          <template v-if="flag">
            <div class="menu" v-if="menuList.length > 0">
              <horizonMenu :menuList="menuList" :level="-1" :allMenuList="menuList"></horizonMenu>
            </div>
          </template>
          <template v-for="(item, index) in menuList" v-else="">
            <el-menu-item :index="index+''" :key="index" @click="changeMenuIndex(index,item.menuName)"  id="menubg" :class="{activeli: menuIndex===index}">
              {{item.menuName}}
            </el-menu-item>
          </template>
        </el-menu>
      </el-col>
      <!--<el-col :xs="8" :span="2" class="userinfo">

      </el-col>-->
      <el-col :xs="8" :span="6">
        <div class="menu_index">
          <ul style="float:right">
            <!--<li v-if="getAuth(3)">-->
              <!--&lt;!&ndash;<a class="hide">获取帮助&ndash;&gt;-->
                <!--&lt;!&ndash;<i class="el-icon-caret-bottom" style="margin-left:5px;"></i>&ndash;&gt;-->
              <!--&lt;!&ndash;</a>&ndash;&gt;-->
              <!--&lt;!&ndash;<ul id="width2">&ndash;&gt;-->
                <!--&lt;!&ndash;<li><a @click="feedbackMenu" v-if="getAuth(1)">问题反馈</a></li>&ndash;&gt;-->
                <!--&lt;!&ndash;<li><a @click="helpListMenu" v-if="getAuth(2)">帮助中心</a></li>&ndash;&gt;-->
              <!--&lt;!&ndash;</ul>&ndash;&gt;-->
            <!--</li>-->
            <li style="float:right;">
              <a class="hide" style="text-align:center;">{{$store.state.loginName}}
                <i class="el-icon-caret-bottom" style="margin-left:5px;"></i>
              </a>
              <ul id="width2">
                <li><a @click="updateAccount">修改资料</a></li>
                <li><a @click="updatePassword">修改密码</a></li>
                <li><a @click="helpListMenu" v-if="getAuth(2)">帮助中心</a></li>
                <li><a @click="controller">控制台</a></li>
                <li><a @click="logout">退出登录</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <el-badge class="el-dropdown-link userinfo-inne" is-dot style="color: #20A0FF;cursor:pointer;margin-right:20px;line-height:30px;float:right;margin-top:14px"  @click.native="selectNotice" v-if="getAuth(0)">
          <!--铃铛图标-->
          <i class="icon iconfont" style="font-size:22px;">&#xe6a7;</i>
        </el-badge>
      </el-col>
    </el-row>
    <!--主体-->
    <el-col :span="24" style="min-height:680px;">
      <el-col :span="flag ? 2 : 3" style="min-height:680px;">
        <template v-if="!flag">
          <ul class="menu0" v-if="menuList.length>0">
            <ldmenu v-for="(menu, index) in menuList[menuIndex].childNode" :key="index" :model='menu' :menuIndex="1"></ldmenu>
          </ul>
          <div style="height: 100%; width: 1px;  box-shadow:1px 1px 6px rgba(0, 0, 0, 0.35); background-color:#e1e1e1; position: absolute; left:12.5%; top: 0px;z-index:-1"></div>
        </template>
      </el-col>
      <!--面包屑-->
      <el-col :span="flag ? 20 : 21" style="min-height:680px;padding-left:10px;padding-top:5px;">
        <div id="breads" style="margin-top: 10px;margin-left:15px;">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item, index) in getBreads" :key="index" v-if="item !== ''" >
              <span @click.stop="goHome(item)">{{item}}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div id="container">
          <router-view></router-view>
        </div>
      </el-col>
      <el-col :span="2" v-if="!flag">
      </el-col>
    </el-col>
    <el-col :span="24"
            style="text-align: center;color:#646464;font-size:13px;background-color:#fff;border-top:1px solid #d0d0d0;height:50px;line-height:50px">
      <!--北京途游国际旅行社有限公司-->
      江苏莱丹信息技术有限公司
    </el-col>
    <el-col>
      <!-- 修改个人资料信息 -->
      <el-dialog :title="dialogTitle" :visible.sync="showAdd" :close-on-click-modal="false" @close="resetAccount">
        <el-form :model="account" label-width="80px" :rules="accountFormRules" ref="account"
                 style="margin-top: -30px;margin-left: -10px;">
          <el-form-item label="真实姓名" prop="userName" id="formheight">
            <el-input v-model="account.userName"></el-input>
          </el-form-item>
          <el-form-item label="登录名" prop="loginName" id="formheight">
            <el-input v-model="account.loginName" :disabled="true"></el-input>
          </el-form-item>
          <!--<el-form-item label="密码" v-if="opType==='add'" prop="password">
            <el-input v-model="account.password" type="password" ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" v-if="opType==='add'" prop="confirmPass">
            <el-input v-model="account.confirmPass" type="password" ></el-input>
          </el-form-item>-->
          <el-form-item label="证件号" prop="cardNo" id="formheight">
            <el-col :span="6">
              <el-select v-model="account.cardType" clearable placeholder="请选择" style="width: 140%;">
                <el-option label="身份证" value="NI"></el-option>
                <el-option label="护照" value="PP"></el-option>
                <el-option label="其他" value="OTHER"></el-option>
              </el-select>
            </el-col>
            <el-col :span="18" style="padding-left: 35px">
              <el-input v-model="account.cardNo"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="性别" id="formheight">
            <el-radio-group v-model="account.sex">
              <el-radio class="radio" :label="1">男</el-radio>
              <el-radio class="radio" :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="角色类型" id="formheight">
            <el-select v-model="account.roleId" placeholder="角色类型" style="width: 100%">
              <el-option v-for="(item, index) in roleList" :key="index" :label="item.roleName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" id="formheight">
            <el-input v-model="account.mail"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone" id="formheight">
            <el-input v-model="account.phone"></el-input>
          </el-form-item>
          <el-form-item label="QQ" id="formheight">
            <el-input v-model="account.qq"></el-input>
          </el-form-item>
        </el-form>
        <div scope="footer" class="dialog-footer" style="text-align: right;">
          <el-button @click.native="resetAccount">取消</el-button>
          <el-button type="primary" @click.native="handleSubmit" :loading="saveLoading">保存</el-button>
        </div>
      </el-dialog>
    </el-col>
    <el-col>
      <el-dialog :title="passTitle" :visible.sync="passwordInfo" :close-on-click-modal="false" @close="resetPass">
        <el-form :model="pwd" label-width="100px" :rules="passRules" ref="pwd"
                 style="margin-top: -30px;margin-left: -20px;">
          <el-form-item label="原密码" prop="old_password" id="formheight">
            <el-input type="password" auto-complete="off" v-model="pwd.old_password"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="new_password" id="formheight">
            <el-input type="password" auto-complete="off" v-model="pwd.new_password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="renew_password" id="formheight">
            <el-input type="password" auto-complete="off" v-model="pwd.renew_password"></el-input>
          </el-form-item>
        </el-form>
        <div scope="footer" class="dialog-footer" style="text-align: right;">
          <el-button @click.native="resetPass">取消</el-button>
          <el-button type="primary" @click.native="passwordSubmit" :loading="saveLoading">保存</el-button>
        </div>
      </el-dialog>
    </el-col>
    <!--消息公告-->
    <el-col>
      <el-dialog :title="noticeTitle" :visible.sync="noticeInfo" :close-on-click-modal="false" @close="resetNotice">
        <div v-show="noticeshowinfo">
          <el-table :data="noticeList" stripe :show-header="false">
            <el-table-column prop="title" label="标题"  :show-header="false">
              <template scope="scope">
                <div v-html="scope.row.title" @click="noticeByindex(scope.row)">
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="!noticeshowinfo">
          <div><span style="font-weight:bold;">标题：</span><span>{{noticeShow.title}}</span></div>
          <div><span style="font-weight:bold;">内容：</span><span v-html="noticeShow.content" id="nrbox"></span></div>
          <div style="text-align: right;"><span style="font-weight:bold;">发布人：</span>{{noticeShow.author}}</div>
        </div>
        <div scope="footer" class="dialog-footer" style="position:absolute;bottom:10px;right:20px;">
          <el-button @click.native="resetNotice"  v-show="noticeshowinfo">取消</el-button>
          <el-button type="primary" @click.native="noticeMenu"  v-show="noticeshowinfo">查看更多</el-button>
          <el-button type="primary" @click.native="noticeReturn"  v-show="!noticeshowinfo">返回</el-button>
        </div>
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script type="text/ecmascript-6">
  import $ from 'jquery'
  import ldmenu from '../../components/base/menu.vue'
  import horizonMenu from '../../components/base/horizontalMenu.vue'
  import {gotBreads, getMenuByUrl, sortByMenuTop, sessionOut} from '../common/js/util.js'
  export default {
    data () {
      var updatePassCheck = (rule, value, callback) => {
        if (value !== this.pwd.new_password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      }
      var oldNewPass = (rule, value, callback) => {
        if (value === this.pwd.old_password) {
          callback(new Error('新密码和旧密码一致，重新修改'))
        } else {
          callback()
        }
      }
      // 证件类型校验规则
      var validateCardType = (rule, value, callback) => {
        var cardType = this.account.cardType
        if (cardType === '' && value !== '') {
          this.account.cardNo = ''
          // callback(new Error('请选择证件类型!'))
        } else if (cardType !== '' && value === '') {
          callback(new Error('请输入证件号'))
        } else {
          if (cardType === 'NI') {
            var para = {cardNo: value}
            this.$http.post('/smartLight/web/baseAccount/checkIDCard.htm', para).then(response => {
              var resBody = response.body
              if (resBody.isSuccess !== 0) {
                callback(new Error('请输入正确的身份证号码'))
              } else {
                callback()
              }
            })
          } else if (cardType === 'PP') {
            var teg1 = new RegExp('^[DESPG]\\d{8}$')
            var teg2 = new RegExp('^[DSP]E\\d{7}$')
            if ((!teg1.test(value) && !teg2.test(value)) || value.trim() === '') {
              callback(new Error('请输入正确的护照号码'))
            } else {
              callback()
            }
          } else {
            callback()
          }
        }
      }
      // 证件号校验规则
      var validateCardNo = (rule, value, callback) => {
        var cardType = this.account.cardType
        if (cardType === '') {
          if (value !== '') {
            callback(new Error('请选择证件类型'))
          } else {
            callback()
          }
        } else if (cardType === 'NI') {
          var para = {cardNo: value}
          this.$http.post('/smartLight/web/baseAccount/checkIDCard.htm', para).then(response => {
            var resBody = response.body
            if (resBody.isSuccess !== 0) {
              callback(new Error('请输入正确的身份证号码'))
            } else {
              callback()
            }
          })
        } else if (cardType === 'PP') {
          var teg1 = new RegExp('^[DESPG]\\d{8}$')
          var teg2 = new RegExp('^[DSP]E\\d{7}$')
          if ((!teg1.test(value) && !teg2.test(value)) || value.trim() === '') {
            callback(new Error('请输入正确的护照号码'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      // 登录名特殊字符验证
      var validateUserName = (rule, value, callback) => {
        var teg = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
        if (teg.test(value) || value.trim() === '') {
          callback(new Error('请输入正确的用户名'))
        } else {
          callback()
        }
      }
      var validateLoginName = (rule, value, callback) => {
        var teg = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
        if (teg.test(value) || value.trim() === '') {
          callback(new Error('请输入正确的账号'))
        } else {
          callback()
        }
      }
      var checkMail = (rule, value, callback) => {
        if (this.account.mail !== '') {
          var teg = new RegExp(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/)
          if (!teg.test(this.account.mail)) {
            callback(new Error('请输入正确的邮箱格式'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      var checkPhone = (rule, value, callback) => {
        if (this.account.phone !== '') {
          var teg1 = new RegExp('^(\\d{11})$')
          var teg2 = new RegExp('^((\\d{3,4})-(\\d{7,8}))$')
          if (!teg1.test(this.account.phone) && !teg2.test(this.account.phone)) {
            callback(new Error('请输入正确的电话格式'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      // 密码判断
      var passworkCheck = (rule, value, callback) => {
        var user = sessionStorage.getItem('user')
        if (user) {
          this.account = JSON.parse(user)
        }
        this.$http.post('/smartLight/web/baseAccount/validatePwd.htm', {
          password: value,
          id: this.account.id,
          type: this.account.type
        }).then(response => {
          if (response.body.isSuccess !== 0) {
            callback(new Error(response.body.errorMsg))
          } else {
            callback()
          }
        })
      }
      return {
        saveLoading: false,
        loginType: '',
        flag: false,
        breads: [],
        activeName: '',
        total: 2,
        page: 1,
        pageSize: 10,
        sysUserName: '',
        dialogTitle: '个人资料',
        passTitle: '修改登录密码',
        noticeTitle: '消息公告',
        opType: 'update',
        role: {},
        menuList: [],
        showAdd: false,
        passwordInfo: false,
        noticeInfo: false,
        diaAlert: false,
        noticeshowinfo: true,
        noticeShow: {
          title: '',
          content: '',
          author: ''
        },
        roleList: [], // 角色集合
        noticeList: [], // 公告集合
        account: {
          userName: '',
          loginName: '',
          cardType: '',
          cardNo: '',
          sex: 1,
          mail: '',
          phone: '',
          qq: '',
          roleId: '',
          status: 0
        },
        menuIndex: 3,
        pwd: {
          old_password: '',
          new_password: '',
          renew_password: ''
        },
        accountFormRules: {
          userName: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {validator: validateUserName}
          ],
          loginName: [
            {required: true, message: '请输入登录名', trigger: 'blur'},
            {validator: validateLoginName}
          ],
          cardNo: [
            {validator: validateCardNo, trigger: 'blur'},
            {validator: validateCardType, trigger: 'change'}
          ],
          email: [
            {validator: checkMail, trigger: 'blur'}
          ],
          phone: [
            {validator: checkPhone, trigger: 'blur'}
          ]
        },
        passRules: {
          old_password: [
            {required: true, message: '请输入原密码', trigger: 'blur'},
            {min: 6, max: 18, message: '请输入6~18个字符', trigger: 'blur'},
            {validator: passworkCheck, trigger: 'blur'}
          ],
          new_password: [
            {required: true, message: '请输入新密码', trigger: 'blur'},
            {min: 6, max: 18, message: '请输入6~18个字符', trigger: 'blur'},
            {validator: oldNewPass, trigger: 'blur'}
          ],
          renew_password: [
            {required: true, message: '请输入确认密码', trigger: 'blur'},
            {validator: updatePassCheck, trigger: 'blur'}
          ]
        },
        adminInfoButtons: [358, 359, 360, 361, 483, 532], // 运营权限菜单  消息，
        adminPButtons: [423, 424, 425, 426, 534], // 问题，
        adminHelpButtons: [362, 363, 364, 365, 533], // 帮助中心
        src: '' // 显示主页面路径
      }
    },
    methods: {
      // 获取页面按钮权限
      getAuth (index) {
        let buttonIds = sessionStorage.getItem('buttonIds')
        if (buttonIds === null) {
          return false
        }
        let id = ''
        buttonIds = ',' + buttonIds + ','
        if (index === 0) { // 消息管理
          for (var j in this.adminInfoButtons) {
            id = ',' + this.adminInfoButtons[j] + ','
            if (buttonIds.indexOf(id) >= 0) {
              return true
            } else {
              continue
            }
          }
          return false
        } else if (index === 1) { // 问题菜单
          for (var k in this.adminPButtons) {
            id = ',' + this.adminPButtons[k] + ','
            if (buttonIds.indexOf(id) >= 0) {
              return true
            } else {
              continue
            }
          }
          return false
        } else if (index === 2) { // 帮助菜单
          for (var l in this.adminHelpButtons) {
            id = ',' + this.adminHelpButtons[l] + ','
            if (buttonIds.indexOf(id) >= 0) {
              return true
            } else {
              continue
            }
          }
          return false
        } else if (index === 3) {
          for (var m in this.adminPButtons) {
            id = ',' + this.adminPButtons[m] + ','
            if (buttonIds.indexOf(id) >= 0) {
              return true
            } else {
              continue
            }
          }
          for (var n in this.adminHelpButtons) {
            id = ',' + this.adminHelpButtons[n] + ','
            if (buttonIds.indexOf(id) >= 0) {
              return true
            } else {
              continue
            }
          }
          return false
        } else {
          return false
        }
      },
      changeMenuIndex (index, menuName) {
        this.menuIndex = index
        sessionStorage.setItem('menuIndex', index)
        sessionStorage.setItem('menuIndexAndName', index + ',' + menuName)
      },
      handleOpen (key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
        console.log(key, keyPath)
      },
      logout: function () {
        this.$confirm('确认退出吗?', ' ', {
          type: 'warning'
        }).then(() => {
          sessionStorage.removeItem('user')
          sessionStorage.removeItem('menuIndexAndName')
          sessionStorage.removeItem('menuIndex')
          // location.href = 'login.html'
          this.$router.push({path: '/login'})
          sessionStorage.clear()
        }).catch(() => {

        })
      },
      controller: function () {
        this.$router.push({path: '/controller'})
      },
      // 展示账号修改页面的信息
      updateAccount: function () {
        this.dialogTitle = '修改个人资料'
        this.showAdd = true
        var user = sessionStorage.getItem('user')
        if (user) {
          this.account = JSON.parse(user)
        }
        // 后台查询角色集合
        this.$http.post('/smartLight/web/baseAccount/getRolesList.htm', {
          companyId: this.account.companyId,
          type: this.account.type,
          companyType: this.account.type
        }).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.roleList = resBody.result
          }
        })
      },
      // 账号修改取消
      resetAccount () {
        this.showAdd = false
        this.account = {
          userName: '',
          loginName: '',
          cardType: '',
          cardNo: '',
          sex: 1,
          mail: '',
          phone: '',
          roleId: '',
          qq: ''
        }
        this.$refs['account'].resetFields()
      },
      noticeByindex: function (row) {
        this.noticeshowinfo = false
        this.noticeShow.title = row.title
        this.noticeShow.content = row.content
        this.noticeShow.author = row.author
      },
      noticeReturn: function () {
        this.noticeshowinfo = true
      },
      // 展示消息公告信息
      selectNotice: function () {
        this.noticeInfo = true
        var user = sessionStorage.getItem('user')
        if (user) {
          this.account = JSON.parse(user)
        }
        // 后台查询公告集合
        this.$http.post('/smartLight/web/baseNotice/getList.htm', {
          pageNumber: 1,
          pageSize: 5,
          type: this.account.type
        }).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.noticeList = resBody.result
          }
        })
      },
      // 修改账号提交
      handleSubmit () {
        this.$refs.account.validate((valid) => {
          if (valid) {
            var accountArr = []
            var account = {}
            var url = '/smartLight/web/baseAccount/update.htm'
            // 由于添加和更新的传参方式不同，此处分开处理
            account.id = this.account.id
            account.type = this.account.type
            var fields = {
              loginName: this.account.loginName,
              mail: this.account.mail,
              qq: this.account.qq,
              sex: this.account.sex,
              userName: this.account.userName,
              cardType: this.account.cardType,
              cardNo: this.account.cardNo,
              phone: this.account.phone,
              roleId: this.account.roleId
            }
            account.op = 'update'
            account.fields = fields
            accountArr.push(account)
          }
          this.addLoading = true
          this.saveLoading = true
          this.doUpdate(url, accountArr, 'info')
        })
      },
      // 修改登录密码
      updatePassword () {
        this.passwordInfo = true
        this.pwd = {
          old_password: '',
          new_password: '',
          renew_password: ''
        }
        this.passTitle = '修改登录密码'
      },
      // 问题反馈跳转页面
      feedbackMenu () {
        this.$router.push({path: '/baseFeedback'})
        this.$store.dispatch('updatelocationpath', '/baseFeedback')
        var menu = getMenuByUrl(this.menuList, '/baseFeedback')
        var breads = gotBreads(menu, this.menuList)
        this.$store.dispatch('updateBreads', breads)
        // 将面包屑和url保存至sessionStorage
        sessionStorage.setItem('breads', breads)
        sessionStorage.setItem('menuUrl', '/baseFeedback')
      },
      // 帮助中心跳转页面
      helpListMenu () {
        this.$router.push({path: '/baseHelpList'})
        this.$store.dispatch('updatelocationpath', '/baseHelpList')
        var menu = getMenuByUrl(this.menuList, '/baseHelpList')
        var breads = gotBreads(menu, this.menuList)
        this.$store.dispatch('updateBreads', breads)
        // 将面包屑和url保存至sessionStorage
        sessionStorage.setItem('breads', breads)
        sessionStorage.setItem('menuUrl', '/baseHelpList')
      },
      // 公告跳转页面
      noticeMenu () {
        this.noticeInfo = false
        // this.$store.dispatch('updatelocationpath', 'notice.html')
        this.$router.push({path: '/baseNotice'})
        this.$store.dispatch('updatelocationpath', '/baseNotice')
        var menu = getMenuByUrl(this.menuList, '/baseNotice')
        var breads = gotBreads(menu, this.menuList)
        this.$store.dispatch('updateBreads', breads)
        // 将面包屑和url保存至sessionStorage
        sessionStorage.setItem('breads', breads)
        sessionStorage.setItem('menuUrl', '/baseNotice')
      },
      // 取消重置信息
      resetPass () {
        this.passwordInfo = false
        this.pwd = {
          old_password: '',
          new_password: '',
          renew_password: ''
        }
        this.$refs['pwd'].resetFields()
      },
      // 取消消息公告
      resetNotice () {
        this.noticeshowinfo = true
        this.noticeInfo = false
      },
      // 密码提交修改
      passwordSubmit () {
        this.$refs.pwd.validate((valid) => {
          if (valid) {
            this.addLoading = true
            var user = sessionStorage.getItem('user')
            if (user) {
              this.account = JSON.parse(user)
            }
            var params = {id: this.account.id, password: this.pwd.new_password, type: this.account.type}
            this.saveLoading = true
            this.doUpdate('/smartLight/web/baseAccount/updatePwd.htm', params, 'password')
          }
        })
      },
      // 后台返回成功或失败提示
      doUpdate (url, params, upType) {
        this.$http.post(url, params).then(response => {
          this.saveLoading = false
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.showAdd = false
            this.addLoading = false
            this.passwordInfo = false
            if (upType !== 'password') {
              var user = resBody.result
              this.$message({
                showClose: true,
                message: '操作成功',
                type: 'success'
              })
              this.sysUserName = user.userName
              this.$store.dispatch('updateLoginName', this.account.userName)
              // 修改成功把用户信息存入缓存
              sessionStorage.setItem('user', JSON.stringify(user))
            } else { // 修改登录密码成功，重新登录
              sessionStorage.clear()
              this.$alert('修改成功，请重新登录', ' ', {
                type: 'warning'
              }).then(() => {
                this.$router.push({path: '/login'})
              })
            }
          } else if (resBody.isSuccess === 2) {
            sessionOut(this)
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      // 角色初始化
      initMenuList () {
        this.$http.post('/smartLight/web/sysRole/getById.htm', {type: this.loginType, roleId: this.account.roleId}).then(response => {
          var resBody = response.body
          var isSuccess = resBody.isSuccess
          if (isSuccess === 0) { // 成功
            // sessionStorage.setItem('buttonIds', resBody.tmpData) // 权限按钮ID集合
            this.role = resBody.result
            this.menuList = JSON.parse(resBody.result.menu)
            // 过滤无效的一级菜单
            for (let i = 0; i < this.menuList.length; i++) {
              if (!this.menuList[i].childNode) {
                this.menuList.splice(i, 1)
              }
            }
            sortByMenuTop(this.menuList) // 菜单排序
            sessionStorage.setItem('allMenus', resBody.result.menu) // 保存菜单集合
            // 面包屑
            if (sessionStorage.getItem('breads')) {
              this.$store.dispatch('updateBreads', sessionStorage.getItem('breads').split(','))
              this.$store.dispatch('updatelocationpath', sessionStorage.getItem('menuUrl'))
            } else {
              var menu = getMenuByUrl(this.menuList, this.$store.state.locationpath)
              var breads = gotBreads(menu, this.menuList)
              this.$store.dispatch('updateBreads', breads)
            }
            var menuIndexAndName = sessionStorage.getItem('menuIndexAndName')
            if (menuIndexAndName !== '' && menuIndexAndName !== null) {
              var menuName = menuIndexAndName.split(',')[1]
              var checkMenuName = false
              for (var i = 0; i < this.menuList.length; i++) {
                if (this.menuList[i].menuName === menuName) {
                  checkMenuName = true
                  sessionStorage.removeItem('menuIndex')
                  sessionStorage.setItem('menuIndex', i) // 设置最新一级菜单menuIndex--单仕瑞--2017年4月28日 10:03:52
                }
              }
              if (!checkMenuName) {
                sessionStorage.removeItem('menuIndex')
                sessionStorage.setItem('menuIndex', 0) // 设置登录成功后一级菜单默认id为0--单仕瑞--2017年4月28日 10:03:52
              }
            }
            var newMenuIndex = sessionStorage.getItem('menuIndex')
            if (newMenuIndex) {
              this.menuIndex = parseInt(newMenuIndex)
            }
          } else if (isSuccess === 2) { // 超时
            sessionOut(this)
          } else { // 失败
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      // 首页跳转
      goHome (item) {
        if (item === '首页') {
          this.$store.dispatch('updateBreads', ['首页', '系统中心', '系统管理', '系统配置'])
          this.$store.dispatch('updatelocationpath', '/baseConfig')
          this.$router.push({path: '/baseConfig'})
        }
      }
    },
    watch: {
      src: function (val, oldVal) {
        if (val !== '/' && val !== '') {
          $('#loader').load(val)
        }
      }
    },
    computed: {
      getBreads () {
        this.breads = this.$store.state.breads
        if (this.breads.length > 0) {
          return this.breads
        }
      }
    },
    created () {
      let user = sessionStorage.getItem('user')
      if (user) {
        user = JSON.parse(user)
        // '/'路由跳转初始化面包屑等信息
        var orign = this.$route.params.orignflag
        if (orign === 1) {
          // 更新vuex
          let breads = ['首页', '系统中心', '系统管理', '系统配置']
          this.$store.dispatch('updateBreads', breads)
          this.$store.dispatch('updatelocationpath', '/baseConfig')
          this.$store.dispatch('showActive', {url: '/baseConfig'})
          // 更新sessionStorage
          sessionStorage.setItem('breads', breads)
          sessionStorage.setItem('menuUrl', '/baseConfig')
        }
        this.loginType = user.type
        this.account.roleId = user.roleId
        this.initMenuList()
        this.$store.dispatch('updateLoginName', user.userName)
      }
    },
    components: {
      ldmenu,
      horizonMenu
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  body
    margin: 0px;
    padding: 0px;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    #app
      position: absolute;
      top: 0px;
      bottom: 0px;
      width: 100%;
    .toolbar {
      background: #fff;
      /*padding: 10px;*/
      .el-form-item {
        margin-bottom: 10px;
      }
    }
  .el-dialog--small
    width: 420px !important;
    min-height:160px;
  .activeli
    border-bottom: 4px solid #20A0FF !important;
    color: #20A0FF !important;
    font-weight: bold;
  .container
    width: 100%;
    .header
      height: 60px;
      line-height: 60px;
      background: #fff;
      color: #c0ccda;
      .el-menu-item
        color: #646464
      .menu-h
        border-radius: 2px;
        list-style: none;
        margin: 0;
        padding-left: 0;
        color: #c0ccda;
        background-color: #fff;
      #menubg
        background-color: #fff;
        color: #646464;
      #menubg:hover
        font-weight:bold;border-bottom :2px solid #fff;
        color: #20A0FF;
      .userinfo
        text-align: right;
        padding-right: 3px;
        .userinfo-inner
          color: #646464;
          cursor: pointer;
          img
            width: 40px;
            height: 40px;
            border-radius: 20px;
            margin: 10px 0px 10px 10px;
            float: right;
      .logo
        font-size: 22px;
        img
          width: 40px;
          float: left;
          margin: 10px 10px 10px 18px;
        .txt
          font-weight:bold;
          font-size: 20px;
          line-height: 36px;
          padding-left: 10px;
          color: #646464;
    .main
      background: #ffffff;
      /*bottom: 100px;*/
      .el-menu
        background-color: #fff;
      .content-container
        background: #ffffff;
        position: absolute;
        right: 0px;
        top: 0px;
        bottom: 0px;
        left: 230px;
        padding: 10px;
        border-left: 1px solid #ccc;
        .inner-container
          background: #fff;
          padding: 12px;
          overflow: hidden;
          .breadcrumb-container
            margin-bottom: 15px;
            .title
              width: 200px;
              float: left;
              color: #475669;
            .breadcrumb-inner
              float: left;
          .content-wrapper
            background-color: #fff;
            box-sizing: border-box;

  ul li
    list-style: none;
    padding: 0;
    margin: 0;

  .menu0
    background-color: #fff;
    padding: 0;
    margin-top: 0px;

  .prompt
    color: #ff4949
    line-height: 10px !important;
    display: block;

  #formheight
    margin: 14px 0;
    height: 38px;
    .el-form-item__content
      height: 30px;
    .el-input
      height: 30px;
      .el-input__inner
        height: 30px;

  .borderStyle
    .el-input .el-input__inner {
      border-color: #ff4949 !important;
    }

  #pagination
    background-color: transparent
    .el-input__inner
      width: 120px
  #loader
    margin-top 20px;
    padding-left 10px;
  .item
    margin-top 10px
    margin-right: 40px;
  #dot
    sup
      top:10px;
      right:0px
  #container
    margin-top 10px;
    padding 5px 15px;
  #nrbox
    p
      display:inline-block;
      width:260px;
      word-break:break-all;
      vertical-align:middle;
  .icon.iconfont
    height: 28px;
  .menu_index
    font-family: arial, sans-serif;
    position:relative;
    margin:0;
    font-size:13px;
    #width2
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15)
      width:150px;
      z-index:1000000;
      li a:hover
        color:#20A0FF;
      li a
        width:150px;
        line-height:40px;
        height:40px;
        border-bottom:1px solid #e0e0e0;
        background-color:#fff;
        color:#646464;
    ul
      padding:0;
      margin:0;
      list-style-type: none;
      li
        float:left;
        position:relative;
        color: #20A0FF;
      a, a:visited
        display:block;
        text-decoration:none;
        /*color:#000;*/
        width:100px;
        height:56px;
        text-align:center;
        background:#fff;
        line-height:56px;
        font-size:13px;
        overflow:hidden;
        cursor:pointer;
        font-family:"微软雅黑"
      li:hover
        a
          color:#20A0FF;
          font-weight:bold;
          border-bottom:none;
          font-family:"微软雅黑"
        ul
          display:block;
          position:absolute;
          top:50px;
          left:-70px;
          width:105px;
          li:hover
            ul
              display:block;
              position:absolute;
              left:200px;
              top:0;
          li
            a
              display:block;
              background:#6cc0ff;
              color:#fff;
              font-weight:normal
            a.hide
              background:#6cc0ff;
              color:#fff;
              font-weight:normal
            a:hover
              background:#52b5ff;
              color:#fff;
            ul
              display: none;
      ul
        display: none;
  /*面包屑样式*/
  .el-breadcrumb__item:not(:first-child) .el-breadcrumb__item__inner
    color: #48576a;
    cursor: text;
  .el-breadcrumb__item:last-child .el-breadcrumb__item__inner
  .el-breadcrumb__item:last-child .el-breadcrumb__item__inner a
  .el-breadcrumb__item:last-child .el-breadcrumb__item__inner a:hover
  .el-breadcrumb__item:last-child .el-breadcrumb__item__inner:hover
    color: #97a8be;
    cursor: text;
</style>
